<!-- 首页精简版
    该组件注意事项：
    1、百度地图引用vue-baidu-map组件，api：https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map
-->

<template>
    <div ref="hm-wrap" class="hm-wrap">
        <BaiduMap
            class="hm-map"
            ak="503HVdkpqeHHe2aCUQytZmplPQyWwOK7"
            :center="center"
            :zoom="14"
            :max-zoom="18"        
            :map-click="false"
            :scroll-wheel-zoom="true"
            :mapStyle="{styleJson: styleJson}"
            @ready="init"
        >
            <BmPointCollection v-for="(item, i) in indoorPoints" :key="'indoor' + i" :points="item" shape="BMAP_POINT_SHAPE_CIRCLE" :color="starColors[i]" size="BMAP_POINT_SIZE_NORMAL" @click="clickHandler"></BmPointCollection>
            <BmPointCollection v-for="(item, i) in outdoorPoints" :key="'outdoor' + i" :points="item" shape="BMAP_POINT_SHAPE_STAR" :color="starColors[i]" size="BMAP_POINT_SIZE_BIG" @click="clickHandler"></BmPointCollection>
        </BaiduMap>
        <div class="hm-nav clearfix">
            <ul class="hm-list clearfix">
                <li @click="renderAll">全部</li>
                <li @click="renderOnlyIndoor">室内<i class="icon iconfont icon-circle"></i></li>
                <li @click="renderOnlyOutdoor">室外<i class="icon iconfont icon-star"></i></li>
            </ul>
            <i class="icon iconfont icon-fullscreen" @click="fullScreen"></i>
        </div>
    </div>
</template>

<script>

import { BaiduMap, BmPointCollection } from 'vue-baidu-map'
import { getMapCenterDot, getMapStarList } from '@/service/getData'
import browser from '@/config/browser'

export default {
    name: 'homeMap',
    data () {
        return {
            center: { // 地图中心点坐标
                lng: 0,
                lat: 0
            },
            styleJson: [ // 更改地图背景色
                {
                    "featureType": "water", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#021019"
                    }
                }, 
                {
                    "featureType": "highway", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#147a92", 
                        "visibility": "off"
                    }
                }, 
                {
                    "featureType": "arterial", 
                    "elementType": "labels", 
                    "stylers": {
                        "visibility": "off"
                    }
                }, 
                {
                    "featureType": "local", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#000000", 
                        "visibility": "off"
                    }
                }, 
                {
                    "featureType": "land", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#08304b"
                    }
                }, 
                {
                    "featureType": "railway", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#08304b", 
                        "visibility": "off"
                    }
                }, 
                {
                    "featureType": "subway", 
                    "elementType": "all", 
                    "stylers": { }
                }, 
                {
                    "featureType": "building", 
                    "elementType": "all", 
                    "stylers": {
                        "visibility": "off"
                    }
                }, 
                {
                    "featureType": "all", 
                    "elementType": "labels.text.fill", 
                    "stylers": {
                        "color": "#857f7f"
                    }
                }, 
                {
                    "featureType": "all", 
                    "elementType": "labels.text.stroke", 
                    "stylers": {
                        "color": "#000000"
                    }
                }, 
                {
                    "featureType": "building", 
                    "elementType": "geometry", 
                    "stylers": {
                        "color": "#022338"
                    }
                }, 
                {
                    "featureType": "green", 
                    "elementType": "geometry.fill", 
                    "stylers": {
                        "color": "#062032"
                    }
                }, 
                {
                    "featureType": "boundary", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#1e1c1c"
                    }
                }, 
                {
                    "featureType": "manmade", 
                    "elementType": "all", 
                    "stylers": {
                        "color": "#022338"
                    }
                }, 
                {
                    "featureType": "poi", 
                    "elementType": "labels.icon", 
                    "stylers": {
                        "visibility": "off"
                    }
                }, 
                {
                    "featureType": "arterial", 
                    "elementType": "geometry", 
                    "stylers": {
                        "color": "#224c72", 
                        "weight": "0.3"
                    }
                }, 
                {
                    "featureType": "subway", 
                    "elementType": "all", 
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ],
            indoorPoints: [],   // 室内数据
            outdoorPoints: [],  // 室外数据
            starColors: ['#06b3f5', '#ff0000', '#ff6a00', '#ff0', '#f0f'], // 告警颜色，对应正常、一级、二级、三级、活跃
            ifFullScreen: false // 是否全屏
        }
    },
    components: {
    	BaiduMap,
        BmPointCollection
    },
    methods: {
        // 初始化
        init() {
            this.getMapData();
            this.bindEvents();
        },
        // 绑定事件
        bindEvents() {
            let that = this;

            // 监听全屏事件
            browser.listenerScrrenChange(function() {
                if (browser.getIsFullScreen()) { // 全屏
                    that.$refs['hm-wrap'].style.position = 'fixed';
                    that.$refs['hm-wrap'].style.left = 0;
                    that.$refs['hm-wrap'].style.top = 0;
                    that.$refs['hm-wrap'].style.zIndex = 1;
                    that.ifFullScreen = true;
                }else { // 非全屏
                    that.$refs['hm-wrap'].style.position = 'initial';
                    that.$refs['hm-wrap'].style.zIndex = 'initial';
                    that.ifFullScreen = false;
                }
            })
        },
        // 请求地图坐标数据
    	async getMapData() {
    		let that = this,
    			 res = await getMapCenterDot();

    		if (res.retStatus == responseStatus.ok) {
    			that.center.lng = res.retBody.lng;
    			that.center.lat = res.retBody.lat;
    		}
            that.getStarList();
    	},
        // 请求星光数据
        async getStarList() {
            let that = this,
                 res = await getMapStarList();

            console.log('starres', res);
            if (res.retStatus == responseStatus.ok) {
                that.buildStars(res.retBody.list);
            }
        },
        // 处理星光数据，按室内/室外、告警级别分类
        buildStars(data) {
            let that = this,
                starColors = that.starColors,
                indoorData = [[], [], [], [], []],
                outdoorData = [[], [], [], [], []];

            for (var i = 0; i < data.length; i++) {
                let d = data[i];
                if (d.isinside == '1') { // 室内
                    switch (d.level) {
                        case 0:
                            indoorData[0].push(d);
                            break;
                        case 1:
                            indoorData[1].push(d);
                            break;
                        case 2:
                            indoorData[2].push(d);
                            break;
                        case 3:
                            indoorData[3].push(d);
                            break;
                        case 4:
                            indoorData[4].push(d);
                            break;
                    }
                }else { // 室外
                    switch (d.level) {
                        case 0:
                            outdoorData[0].push(d);
                            break;
                        case 1:
                            outdoorData[1].push(d);
                            break;
                        case 2:
                            outdoorData[2].push(d);
                            break;
                        case 3:
                            outdoorData[3].push(d);
                            break;
                        case 4:
                            outdoorData[4].push(d);
                            break;
                    }
                }
            }
            that.indoorData = indoorData;
            that.outdoorData = outdoorData;
            that.renderIndoor(indoorData);
            that.renderOutdoor(outdoorData);
        },
        // 渲染室内星光数据
        renderIndoor(data) {
            let that = this,
                points = [[], [], [], [], []];

            for (var i = 0; i < data.length; i++) {
                let list = data[i];
                for (var k = 0; k < list.length; k++) {
                    points[i].push(list[k]);
                }
            }
            that.indoorPoints = points;
        },
        // 渲染室外星光数据
        renderOutdoor(data) {
            let that = this,
                points = [[], [], [], [], []];

            for (var i = 0; i < data.length; i++) {
                let list = data[i];
                for (var k = 0; k < list.length; k++) {
                    points[i].push(list[k]);
                }
            }
            that.outdoorPoints = points;
        },
        // 点击全部
        renderAll() {
            this.renderIndoor(this.indoorData);
            this.renderOutdoor(this.outdoorData);
        },
        // 点击室内
        renderOnlyIndoor() {
            this.renderIndoor(this.indoorData);
            this.renderOutdoor([]);
        },
        // 点击室外
        renderOnlyOutdoor() {
            this.renderIndoor([]);
            this.renderOutdoor(this.outdoorData);
        },
        // 点击全屏
        fullScreen() {
            let that = this;

            if (that.ifFullScreen) { // 全屏
                browser.cancelfullscreen();
            }else { // 非全屏
                browser.setFullScreen();
            }
        },
        handler({BMap, map}) {
            console.log(BMap, map)
        },
        clickHandler (e) {
            console.log('e', e);
            alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../assets/css/base.less';
    .hm-wrap {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .hm-map {
        width: 100%;
        height: 100%;
    }
    .hm-nav {
        position: absolute;
        top: 10px;
        right: 280px;
        line-height: 23px;
        z-index: 1;
    }
    .hm-list {
        float: left;
        margin-right: 10px;
        border: 1px solid @borderColor;
        border-radius: 13px;
        background: rgba(24, 42, 67, .8);
        li {
            float: left;
            width: 75px;
            border-left: 1px solid @borderColor;
            text-align: center;
            cursor: pointer;
            &:first-child {
                border-left: 0;
            }
        }
    }
    .iconfont {
        margin-left: 5px;
        font-size: 12px;
        color: @textColor;
        vertical-align: middle;
    }
    .icon-star {
        font-size: 14px;
    }
    .icon-fullscreen {
        font-size: 15px;
        cursor: pointer;
    }
</style>